<template>
  <div class="main-menu">
    <div class="logo">
      <img src="@/assets/img/header_logo_rm_bg.png" alt="">
      <h1 class="text">派单管理系统</h1>
    </div>
    <div class="menu">
      <el-menu
        active-text-color="#094bff"
        background-color="#31a4ff"
        :default-active="activeIndex"
        text-color="#fff"
      >
        <el-menu-item v-show="isSystemManager" index="1" @click="handleItemClick('1')">
          <el-icon><User /></el-icon>
          <span>客服管理</span>
        </el-menu-item>
        <el-menu-item index="2" @click="handleItemClick('2')">
          <el-icon><Suitcase /></el-icon>
          <span>师傅管理</span>
        </el-menu-item>
        <el-menu-item index="3" @click="handleItemClick('3')">
          <el-icon><document /></el-icon>
          <span>派单管理</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import useLoginStore from '@/store/login/login'

const router = useRouter()

const route = useRoute()
const activeIndex = ref('')

const loginStore = useLoginStore()

const isSystemManager = ref(false)

function setupActiveWithRoute() {
  if (route.name === 'wokerList') {
    activeIndex.value = '2'
  } else if (route.name === 'customerServiceList') {
    activeIndex.value = '1'
  } else {
    activeIndex.value = '3'
  }
}

function handleItemClick(indexValue) {
  if (indexValue === '3') {
    router.push('/main/dispatch')
  } else if (indexValue === '1') {
    router.push('/main/customerServiceList')
  } else if (indexValue === '2') {
    router.push('/main/wokerList')
  }
}

onMounted(() => {
  // 只有系统管理员显示客服管理
  if (loginStore.userInfo && loginStore.userInfo.role && loginStore.userInfo.role.id == 1) {
    isSystemManager.value = true
  }
  setupActiveWithRoute()
})

</script>

<style lang="scss" scoped>
.main-menu {
  position: relative;

  .logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 10px;

    img {
      width: 80px;
      filter: hue-rotate(0deg) saturate(100%) brightness(150%) contrast(120%);
    }

    .text {
      margin-left: 10px;
      font-size: 18px;
      color: #fff;
    }
  }
}
</style>